<!DOCTYPE html>
<html xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	layout:decorate="~{common/layoutAdmin}">

<head>
	<meta charset="UTF-8">
	<title>课程目标达成度计算平台</title>
	<style scoped>
	.el-upload{
	  width: 100%!important;
	}
	.el-upload .el-upload-dragger{
	  width: 100%!important;
	}
	</style>
</head>

<body>
	<div layout:fragment="fragment_body">
		<el-row :gutter="10">
			<el-form :inline="true" :model="query" class="demo-form-inline">
				<el-form-item label="学号">
					<el-input v-model="query.number" placeholder="请输入学号">
					</el-input>
				</el-form-item>
				<el-form-item label="姓名">
					<el-input v-model="query.name" placeholder="请输入姓名">
					</el-input>
				</el-form-item>
				<el-form-item>
					<el-button @click="onClearn">清空</el-button>
					<el-button type="primary" @click="onSearch">查询</el-button>
				</el-form-item>
			</el-form>
		</el-row>
		<el-row>
			<el-button type="primary" @click="importVisible=true;" plain style="float: right;position: relative;z-index: 100;">导入学生</el-button>
			<el-tabs v-model="query.active" @tab-click="tabClick">
			    <el-tab-pane label="所有生效学生" name="1"></el-tab-pane>
			    <el-tab-pane label="注册待审核" name="0"></el-tab-pane>
			    <el-tab-pane label="离校学生" name="2"></el-tab-pane>
			  </el-tabs>
		</el-row>
		<el-row>
			<el-table :data="students" border style="width: 100%">
				<el-table-column prop="studentNumber" label="学号">
				</el-table-column>
				<el-table-column prop="studentName" label="姓名">
				</el-table-column>
				<el-table-column prop="studentCollege" label="学院">
				</el-table-column>
				<el-table-column prop="studentClass" label="班级">
				</el-table-column>
				<el-table-column prop="studentMajor" label="专业">
				</el-table-column>
				<el-table-column prop="studentSex" label="性别">
				</el-table-column>
				<el-table-column prop="studentMobile" label="手机号">
				</el-table-column>
				<el-table-column prop="studentEmail" label="邮箱号">
				</el-table-column>
				<el-table-column prop="studentIntakeTime" label="入学时间">
				</el-table-column>
				<el-table-column prop="studentGradTime" label="毕业时间">
				</el-table-column>
				<el-table-column prop="studentActive" label="状态">
					<template slot-scope="scope">
					<el-tag type="info" v-if="scope.row.studentActive === 0">失效</el-tag>
					<el-tag  v-if="scope.row.studentActive === 1">生效</el-tag>
					<el-tag type="warning"  v-if="scope.row.studentActive === 2">离校</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="studentGradTime" label="操作">
					<template slot-scope="scope">
						<el-button @click="openStudent(scope.row)" type="text" size="small">修 改</el-button>
				        <el-button v-if="query.active*1 === 1" @click="studentActive(scope.row.studentId, 0)" type="text" size="small">失效</el-button>
				        <el-button v-if="query.active*1 !== 1" @click="studentActive(scope.row.studentId, 1)" type="text" size="small">生效</el-button>
				        <el-button v-if="query.active*1 === 1" @click="studentActive(scope.row.studentId, 2)" type="text" size="small">离校</el-button>
				      </template>
				</el-table-column>
			</el-table>
		</el-row>
		<!--弹框-->
		<el-dialog :title="studentForm.ttitle" :visible.sync="studentForm.visible" width="40%">
			<el-form :model="studentForm" :rules="studentRules" ref="studentForm" label-width="100px">
				<!-- -->
				<el-form-item label="学号" prop="studentNumber">
					<el-input v-model="studentForm.studentNumber"></el-input>
				</el-form-item>
				<el-form-item label="姓名" prop="studentName">
					<el-input v-model="studentForm.studentName"></el-input>
				</el-form-item>
				<el-form-item label="学院" prop="studentCollege">
					<el-input v-model="studentForm.studentCollege"></el-input>
				</el-form-item>
				<el-form-item label="班级" prop="studentClass">
					<el-input v-model="studentForm.studentClass"></el-input>
				</el-form-item>
				<el-form-item label="专业" prop="studentMajor">
					<el-input v-model="studentForm.studentMajor"></el-input>
				</el-form-item>
				<el-form-item label="性别" prop="studentSex">
					<!--<el-input v-model="studentForm.studentSex"></el-input>-->
					<el-select v-model="studentForm.studentSex" filterable placeholder="请选择">
					    <el-option
					      v-for="item in sexs"
					      :key="item.value"
					      :label="item.label"
					      :value="item.value">
					    </el-option>
				    </el-select>
				</el-form-item>
				<el-form-item label="手机号" prop="studentMobile">
					<el-input v-model="studentForm.studentMobile"></el-input>
				</el-form-item>
				<el-form-item label="邮箱号" prop="studentEmail">
					<el-input v-model="studentForm.studentEmail"></el-input>
				</el-form-item>
				<el-form-item label="入学时间" prop="studentIntakeTime">
					<!--<el-input v-model="studentForm.studentIntakeTime"></el-input>-->
					<el-date-picker value-format="yyyy-MM-dd" v-model="studentForm.studentIntakeTime" type="date" placeholder="选择日期" style="width:100%">
	    			<template slot="prepend"><i style="font-size:20px" class="el-icon-user"></i></template>
	    			</el-date-picker>
				</el-form-item>
				<el-form-item label="毕业时间" prop="studentGradTime">
					<!--<el-input v-model="studentForm.studentGradTime"></el-input>-->
					<el-date-picker value-format="yyyy-MM-dd" v-model="studentForm.studentGradTime" type="date" placeholder="选择日期" style="width:100%">
	    			<template slot="prepend"><i style="font-size:20px" class="el-icon-user"></i></template>
	    			</el-date-picker>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="closeStudent">取 消</el-button>
				<el-button type="primary" @click="saveStudent">保 存</el-button>
			</span>
		</el-dialog>
		<!--学生导入-->
		<el-dialog
		  title="学生导入"
		  :visible.sync="importVisible"
		  :close-on-click-modal="false"
		  :show-close="false"
		  width="30%">
		  <el-upload
			  drag
			  ref="upload"
			  :limit="1"
			  :action="uploadUrl"
			  :auto-upload="false"
			  :on-success="uploadSuccess"
			  :before-upload="beforeUpload">
			  <i class="el-icon-upload"></i>
			  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
			  <div class="el-upload__tip" slot="tip">只能上传.xls/.xlsx文件，且不超过500kb</div>
			</el-upload>
		  <span slot="footer" class="dialog-footer">
		    <el-button type="warning" @click="loadExcel" plain>下载模板</el-button>
		    <el-button type="primary" @click="importReadExcel">确 定</el-button>
		    <el-button @click="importVisible = false">返 回</el-button>
		  </span>
		</el-dialog>
	</div>
</body>
<script type="text/javascript" layout:fragment="fragment_script">
	let vueData = {
        uploadUrl: window.location.origin + '/admin/importExcel',
		students: [],
		//activeTab: '1',
		studentTab: [],
		query:{
			active: '1',
			number: '',
			name: '',
		},
		sexs: sexs,
		studentForm:{
			visible: false,
			studentName: '',
			studentNumber: '',
			studentCollege: '',
			studentClass: '',
			studentMajor: '',
			studentSex: '',
			studentMobile: '',
			studentEmail: '',
			studentIntakeTime: '',
			studentGradTime: ''
		},
		studentRules: {
			studentNumber: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			studentName: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			studentCollege: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			studentClass: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			studentMajor: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			studentSex: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			studentMobile: [
				{required: false, message: '不能为空', trigger: 'blur'}
			],
			studentEmail: [
				{required: false, message: '不能为空', trigger: 'blur'}
			],
			studentIntakeTime: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			studentGradTime: [
				{required: false, message: '不能为空', trigger: 'blur'}
			],
		},
		importVisible: false,
		excelData:[]
	}
	let vueMethods = {
		tabClick(){
			this.getStudents()
		},
		getStudents() {
			let that = this
			// that.query.active = that.activeTab
			postRequst('/admin/getStudents', that.query, true).then(function (resp) {
				that.students = resp.rows
			})
		},
		studentActive(studentId, active) {
			let that = this
			postRequst('/admin/studentActive', {id: studentId, active: active}, true).then(function (resp) {
				if(resp.status == 0){
					that.getStudents()
					that.$message({message: resp.msg, type: "success"});
				}else{
					that.$message({message: resp.msg, type: "error"});
				}
			})
		},
		openStudent(row) {
			let that = this
			if (row) {
				that.studentForm.studentId = row.studentId,
				that.studentForm.studentName = row.studentName,
				that.studentForm.studentNumber = row.studentNumber,
				that.studentForm.studentCollege = row.studentCollege,
				that.studentForm.studentClass = row.studentClass,
				that.studentForm.studentMajor = row.studentMajor,
				that.studentForm.studentSex = row.studentSex,
				that.studentForm.studentMobile = row.studentMobile,
				that.studentForm.studentEmail = row.studentEmail,
				that.studentForm.studentIntakeTime = row.studentIntakeTime,
				that.studentForm.studentGradTime = row.studentGradTime,
				that.studentForm.visible = true
			}
		},
		closeStudent() {
			this.$refs["studentForm"].resetFields();
			this.studentForm.visible = false
		},
		saveStudent() {
			let that = this
			this.$refs["studentForm"].validate((valid) => {
				if (valid) {
					postRequst('/admin/saveStudent', that.studentForm).then(function (resp) {
						if (resp.status == 0) {
							that.getStudents()
							that.studentForm.visible = false
							that.$message({message: resp.msg, type: "success"});
						} else {
							that.$message({message: resp.msg, type: "error"});
						}
					})
				}
			});
		},
		loadExcel(){
			window.location.href='/file/student_tp.xlsx'
		},
		importReadExcel(){
			this.$refs.upload.submit();
		},
        uploadSuccess(res, file, fileList){
			let that = this
			that.$refs.upload.clearFiles();
			if(res.status == 0){
				that.$message.success(res.msg);
				that.importVisible = false
				that.getStudents()
			}else{
				this.$message.error(res.msg);
			}
		},
        beforeUpload(file){
			var fileType = file.name.substring(file.name.lastIndexOf('.') + 1)
            const xls = fileType === 'xls'
            const xlsx = fileType === 'xlsx'
            if (xls || xlsx) {
                const isLt10M = file.size / 1024 / 1024 < 10;
	            if (!isLt10M) {
	                this.$message.error('上传图片大小不能超过 10MB!');
	                return false
	            }
	            return true
            }
            this.$message.error("只能上传表格文件");
            return false
		},
		onClearn() {
			let that = this
			that.query.number = ''
			that.query.name = ''
			that.getStudents()
		},
		onSearch() {
			let that = this
			that.getStudents()
		},
	}
	function vueCreated() {
		let that = this
		that.getStudents()
	}

	// 初始化VUE
	new Vue({
		...mainApp, ...{
			created: vueCreated,
			data: {...mainApp.data, ...vueData},
			methods: {...mainApp.methods, ...vueMethods}
		}
	});
</script>

</html>